/*main.html专用的css样式表*/
/*
@media screen and (min-width:1000px){...}              对应PC端页面

@media screen and (max-width:1000px) and (min-width:768px) {...}        对应平板端页面

@media screen and (max-width:768px){...}           对应手机端页面
*/

/*PC端页面*/

@media screen and (min-width:1000px){
	*{
		padding:0;
		margin:0;
	}

	body{
		margin	:	0;
		padding	:	0;
		/*background:#F0F0F0;*/
		background-image: url(../img/gif/test.png);
		letter-spacing: 1px;
		/*background-repeat: no-repeat；*/ 
	}

	.header{
		margin	:	0;
		padding	:	0;
		height	:	12%;
		width	:	100%;
		background: rgba(23, 23, 50, 0.5);
	}
	/*Weather部分*/
	.weather{
		width	:	50%;
		height	:	100%;
		float	:	left;
		font-size	:	0;
		position:	relative;
	}

	.weather img{
		padding: 1%;
		height: 100%;
		border:"0";
	}

	.weather > img:nth-child(2),.weather > img:nth-child(3){
		padding: 0 0 10px 0;
		margin-left: -10px;
		height: 50%;
		border:"0";
	}

	/*音乐部分*/
	.music_show{
		width	:	30%;
		height	:	100%;
		float	:	right;
		background	:	#EED8AE;
	}

	/*导航栏*/

	nav {
		height: 52px;
		background-color: #121212;
		text-align: center;
		border-radius: 4px;
	}
	/*主要内容*/
	content{
		background:rgba(23, 23, 50, 0.5);
	}

	.first_div{
		width:100%;
		margin:0;
		padding: 0;
		height:auto;
		float: left;
		background:rgba(23, 23, 50, 0.5);
		overflow: hidden;
	}

	.first_div .content_first, .first_div .content_first_picture, .first_div .content_second, .first_div .content_second_picture{
		width:50%;
		float:left;
		overflow: hidden;
		display: inline-block;
	}

	.first_div .content_first, .first_div .content_second{
		width: 46%;
		text-align: center;
		font-size: 1.3em;
		margin-top: 5%;
		margin-left: 2%;
		margin-right: 2%;
		padding:5px,;
		background:rgba(105,105,105,0.9);
	}

	.first_div .content_first ul{
		height:10%;
		text-decoration: none;
		margin-bottom:2%;
		padding: 0;
		list-style: none;
	}

	.first_div .content_first ul li, .first_div .content_first ul li h1{
		display: inline;
	}

	.content_first_picture img, .content_second_picture img{
		width:100%;
	}

	/* 页脚 */
	.footer{
		margin	:	0;
		padding	:	0;
		width:100%;
		height:20%;
		float: left;
		background:black;
		justify-content: center;
		text-align: center;
		color: white;
	}

	.footer ul{
		height: 50%;
		text-decoration: none;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.footer ul > li {
		display:inline;
	}

}

/*平板页面*/

@media screen and (max-width:1000px) and (min-width:480px) {
	body{
		margin	:	0;
		padding	:	0;
		position:relative;
	}

	.header{
		margin	:	0;
		padding	:	0;
		height	:	150px;
		width	:	100%;
	}

	.weather{
		width	:	40%;
		height	:	100%;
		float	:	left;
		background	:	#EED8AE;
	}

	.weather .sec1{
		height	:	50%;
		width	:	35%;
		padding	:	0;
		margin	:	0;
		float	:	left;
		position:	relative;
	}

	.weather .sec1:nth-child(2){
		width	:	45%;
	}

	.weather .sec1 #Week{
		padding	:	0;
		margin	:	0;
		height	:	70%;
		padding-top	:	10%;
		padding-left:	20%;
	}
	.weather .sec1 #Month{
		padding	:	0;
		margin	:	0;
		height	:	100%;
		padding-left	:	40%;

	}
	.weather .sec1 #Date1{
		padding	:	0;
		margin	:	0;
		height	:	80%;
		padding-top:10%;
		padding-left:0%;
	}
	.weather .sec1 #Date2{
		padding	:	0;
		margin	:	0;
		height	:	70%;
		padding-top:10%;
	}

	.weather .sec1 #Time{
		padding	:	0;
		margin	:	0;
		float	:	left;
		height	:	100%;
		padding-left:0%;
	}

	.music_show{
		width	:	40%;
		height	:	100%;
		float	:	right;
		background	:	#EED8AE;
	}

	/*导航栏*/
	.navbar{
		width:100%;
		height:7%;
		background:black;
	}

	/*主要内容*/

	.content{
		margin	:	0;
		padding	:	0;
		width:100%;
		height:100%;
	}

	.first_div{
		width:96%;
		margin-left: 2%;
		margin-right: 2%;
		display: table;
	}

	.first_div .content_first, .first_div .content_first_picture, .first_div .content_second, .first_div .content_second_picture{
		width:50%;
		float:left;
		overflow: hidden;
		display: table-cell;
	}

	.first_div .content_first, .first_div .content_second{
		background:#E0FFFF;
	}

	.content_first_picture img, .content_second_picture img{
		width:100%;
	}
}

/*手机页面*/

@media screen and (max-width:480px){
	body{
		margin	:	0;
		padding	:	0;
	}

	.header{
		margin	:	0;
		padding	:	0;
		height	:	15%;
		width	:	100%;
	}

	.weather{
		width	:	50%;
		height	:	100%;
		float	:	left;
		background	:	#EED8AE;
	}

	.weather .sec1{
		height	:	50%;
		width	:	35%;
		padding	:	0;
		margin	:	0;
		float	:	left;
		position:	relative;
	}

	.weather .sec1:nth-child(2){
		width	:	45%;
	}

	.weather .sec1 #Week{
		padding	:	0;
		margin	:	0;
		width	:	150%;
		padding-top	:	30%;
		padding-right:	20%;
	}
	.weather .sec1 #Month{
		padding	:	0;
		margin	:	0;
		height	:	100%;
		padding-left	:	40%;
		padding-right	:	25%;
	}
	.weather .sec1 #Date1{
		padding	:	0;
		margin	:	0;
		height	:	50%;
		padding-top:30%;
		padding-left:20%;
	}
	.weather .sec1 #Date2{
		padding	:	0;
		margin	:	0;
		height	:	35%;
		padding-top:10%;
	}

	.weather .sec1 #Time{
		padding	:	0;
		margin	:	0;
		float	:	left;
		height	:	100%;
	}

	.music_show{
		width	:	50%;
		height	:	100%;
		float	:	right;
		background	:	#EED8AE;
	}	

	/*导航栏*/
	.navbar{
		width:100%;
		height:5%;
		background:black;
	}

	/*主要内容*/

	.content{
		margin	:	0;
		padding	:	0;
		width:100%;
		height:100%;
	}

	.first_div{
		width:96%;
		margin-left: 2%;
		margin-right: 2%;
	}

	.first_div .content_first, .first_div .content_first_picture, .first_div .content_second, .first_div .content_second_picture{
		width:50%;
		float:left;
		overflow: hidden;
	}

	.first_div .content_first, .first_div .content_second{
		background:#F0FFFF;
	}

	.content_first_picture img, .content_second_picture img{
		width:100%;
	}
}